<template>
  <div class="Breadcrumb">
    <el-breadcrumb :separator="separator" class="Breadcrumb">
      <transition-group name="breadcrumb">
        <el-breadcrumb-item
          v-for="match in macthes"
          :key="match.path"
          :to="{ path: match.path }"
          >{{ match.meta.title }}</el-breadcrumb-item
        >
      </transition-group>
    </el-breadcrumb>
    <div class="Tagmenu">
      <el-tag
        v-for="(route, index) in brandRoute"
        :key="route.path"
        @close="closeMenu(route, index)"
        @click="skip(index)"
        :style="selectTag_Style(index)"
        size="mini"
        closable
        >{{ route.meta.title }}
      </el-tag>
    </div>
  </div>
</template>
<script>
import { mapState, mapMutations } from "vuex";
export default {
  name: "Breadcrumb",
  components: {},
  props: {
    separator: {
      type: String,
      defaules: "/",
    },
    routes: {
      type: Object,
      defaults: [],
    },
  },
  data() {
    return {
      currentIndex: 0,
    };
  },
  beforeCreate() {
    // this.$router.go(0);
  },
  mounted() {
    console.log(this.brandRoute);
  },
  computed: {
    ...mapState({
      brandRoute: (state) => state.brand.brandRoute,
    }),
    macthes() {
      let macth = this.$route.matched.filter(
        (item) => item.meta && item.meta.title
      );
      if (macth[0].name != "Dashbord") {
        macth.unshift({
          path: "/dashbord",
          name: "Dashbord",
          component: () => import("@/views/dashbord"),
          meta: { title: "首页", icon: "el-icon-eleme" },
        });
      }
      return macth;
    },
  },
  methods: {
    // 移除删掉的tagMenu
    ...mapMutations({
      remove_brandRoute: "brand/remove_brandRoute",
    }),

    selectTag_Style(index) {
      if (index == this.currentIndex) {
        return {
          backgroundColor: "#5cb87a",
          color: "#fff",
        };
      }
    },
    skip(index) {
      //跳转的时候赋予currentIndex
      this.currentIndex = index;
      this.$router.push({
        path: this.brandRoute[index].path,
      });
    },
    closeMenu(route, index) {
      if (route.name != "Dashbord") {
        this.remove_brandRoute({ route, index });
        //如果删除的是当前选中的菜单那么删除后让路由跳转到上一个index的位置;
        //并且重新赋值currentIndex
        if (this.currentIndex == index) {
          this.$router.push({
            path: this.brandRoute[index - 1].path,
          });
          this.currentIndex = index - 1;
          //如果删除的是当前选中的菜单前面的那么删除后;
          //路由跳转到该删除菜单后面的那一个,并且重新赋值currentIndex
        } else if (index < this.currentIndex) {
          this.currentIndex = index;
          this.$router.push({
            path: this.brandRoute[index].path,
          });
        }
      }
    },
  },
  created() {},
  watch: {
    $route: {
      //监听并立即执行,防止刷新页面导致的选中的菜单重置到首页;
      //同时也为了让侧边栏点击以后tagmenu也选中当前的菜单项
      immediate: true,
      handler(cur_route) {
        //根据当前路由结果和tag路由表中做比对看实在第几位
        this.currentIndex = this.brandRoute.findIndex(
          (route) => route.path == cur_route.path
        );
      },
    },
  },
};
</script>
<style lang="scss" scoped>
.Breadcrumb {
  display: flex;
  align-items: center;
  .Tagmenu {
    box-sizing: border-box;
    flex: 1;
    justify-self: flex-start;
    padding-left: 20px;
    .el-tag {
      &:not(&:nth-of-type(1)) {
        margin-left: 10px;
      }
      cursor: pointer;
      user-select: none;
    }
  }
}
:deep(.el-breadcrumb__inner) {
  color: #fff;
}
</style>
